<template>
  <div>

    <!--    <sticky :class-name="'sub-navbar'" :z-index="10">-->
    <!--      &lt;!&ndash;      <CommentDropdown v-model="postForm.comment_disabled" />&ndash;&gt;-->
    <!--      &lt;!&ndash;      <PlatformDropdown v-model="postForm.platforms" />&ndash;&gt;-->
    <!--      &lt;!&ndash;      <SourceUrlDropdown v-model="postForm.source_uri" />&ndash;&gt;-->
    <!--      &lt;!&ndash;   产品和组件分开来   &ndash;&gt;-->


    <!--      <el-popconfirm-->
    <!--        @confirm="$router.back()"-->
    <!--        style="margin-left: 10px;"-->
    <!--        title="是否放弃当前更改并返回？">-->
    <!--        <el-button slot="reference" type="info">-->
    <!--          返回产品列表-->
    <!--        </el-button>-->
    <!--      </el-popconfirm>-->
    <!--      &lt;!&ndash;      &lt;!&ndash;      v-loading="loading"&ndash;&gt;&ndash;&gt;-->
    <!--      &lt;!&ndash;      <el-popconfirm&ndash;&gt;-->
    <!--      &lt;!&ndash;        @confirm="handleDeleteProductList"&ndash;&gt;-->
    <!--      &lt;!&ndash;        style="margin-left: 10px;"&ndash;&gt;-->
    <!--      &lt;!&ndash;        title="是否确定删除下列选定产品？">&ndash;&gt;-->
    <!--      &lt;!&ndash;        <el-button slot="reference" type="info" disabled>&ndash;&gt;-->
    <!--      &lt;!&ndash;          删除产品&ndash;&gt;-->
    <!--      &lt;!&ndash;        </el-button>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </el-popconfirm>&ndash;&gt;-->
    <!--    </sticky>-->


    <!--   产品基础资料信息补全 -->
    <!--  校验的逻辑补全  -->
    <el-form
      :disabled="!isEditStatus"
      :label-width="globalLabelWidth"
      :model="editForm"
      :rules="rules" ref="modifyDataForm" size="small">
      <show-more>
        <template #main>
          <el-row :gutter="globalGutter">

            <!--      :disabled="!isEditStatus"       -->
            <el-col v-bind="globalGrid">
              <el-form-item
                label="产品名称" prop="ProductName">
                <el-input

                  clearable
                  placeholder="请输入产品名称" size="small"
                  v-model="editForm.ProductName"/>
              </el-form-item>
            </el-col>

            <el-col v-bind="globalGrid">
              <el-form-item label="产品分类" prop="CategoricalId">
                <product-categorical-select
                  v-model="editForm.CategoricalId"
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="globalGrid">
              <el-form-item label="编码" prop="Code">
                <el-input
                  :disabled="true"
                  v-model="editForm.Code">
                  <el-button icon="el-icon-s-ticket" slot="append"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="globalGutter">
            <el-col v-bind="globalGrid">
              <el-form-item label="切割文件" prop="CutFilePath">
                <el-input placeholder="示例: C:\temp" v-model="editForm.CutFilePath">
                  <el-button icon="el-icon-folder" slot="append"></el-button>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col v-bind="globalGrid">
              <el-form-item label="打印类型" prop="ProductPrintTypeId">
                <product-print-type v-model="editForm.ProductPrintTypeId"/>
              </el-form-item>
            </el-col>

            <el-col v-bind="globalGrid">
              <el-form-item label="输出类型" prop="ProductShopType">
                <ShopTypeSelect v-model="editForm.ProductShopType"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="globalGutter">
            <el-col v-bind="globalGrid">
              <el-form-item label="产品显示尺寸" prop="ProductSize">
                <el-input v-model="editForm.ProductSize">
                  <el-button icon="el-icon-crop" slot="append"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col v-bind="globalGrid">
              <el-form-item label="单P重量" prop="SingleWeight">
                <el-input v-model="editForm.SingleWeight">
                  <el-button icon="el-icon-odometer" slot="append"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col v-bind="globalGrid">
              <el-form-item
                label="产品类型" prop="ProductType">
                <ProductSelect
                  :disabled="true"
                  v-model="editForm.ProductType"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="globalGutter">
            <el-col v-bind="globalGrid">
              <el-form-item label="尺寸类型" prop="SizeDetailId">
                <!--                <el-input >-->
                <!--                  <el-button icon="el-icon-full-screen" slot="append"></el-button>-->
                <!--                </el-input>-->
                <!--                v-model="editForm.SizeDetailId" -->
                <product-size-select :value.sync="editForm.SizeDetailId"/>
              </el-form-item>
            </el-col>
            <el-col v-bind="globalGrid">
              <el-form-item label="标准重量" prop="Weight">
                <el-input v-model="editForm.Weight">
                  <el-button icon="el-icon-time" slot="append"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="globalGutter">
            <el-col :span="24">
              <el-form-item label="产品描述" prop="Describe">
                <el-input :rows="5" placeholder="请输入产品描述"
                          type="textarea"
                          v-model="editForm.Describe">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </template>

        <!--        <template #more>-->
        <!--        </template>-->

        <template #footer>
          <div></div>
        </template>

      </show-more>
    </el-form>

    <el-row>
      <el-col style="display: flex;justify-content: flex-end">
        <el-button
          @click="startEdit"
          size="small"
          style="margin-left: 10px;"
          type="primary" v-if="!isEditStatus">
          {{`编辑${linkFrom}基本信息`}}
        </el-button>

        <el-button
          @click="saveProductBaseInfo"
          size="small"
          style="margin-left: 10px;"
          type="success" v-else>
          {{`保存${linkFrom}基本信息`}}
        </el-button>

        <el-button
          @click="cancelEdit"
          size="small"
          style="margin-left: 10px;"
          type="info" v-if="isEditStatus">
          {{`撤销${linkFrom}基本信息`}}
        </el-button>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import layoutMixin from '@/mixins/layoutMixin'
  import ProductSelect from '@/components/ATheFridayClub/businessSelect/product/ProductSelect'
  import Sticky from '@/components/Sticky/index'
  import { ModifyProduct } from '@/api/productInformation'
  import { objFirstKeyLowerCase, objFirstKeyUpperCase } from '@/utils/fridayClub/objectUtil'
  import { ERR_OK } from '@/utils/commons'
  import productMixin from '@/views/baseproduct/components/product/productMixin'
  import ShowMore from '@/components/ATheFridayClub/ShowMore'
  import { deepClone } from '@/utils'
  import form from '@/mixins/form'
  import ProductCategoricalSelect from '@/components/ATheFridayClub/businessSelect/product/productCategoricalSelect'
  import ProductPrintType from '@/components/ATheFridayClub/businessSelect/print/productPrintType'
  import ShopTypeSelect from '@/components/ATheFridayClub/businessSelect/product/shopTypeSelect'
  import { debugLogger } from '@/utils/fridayClub/functianal'
  import ProductSizeSelect from '@/components/ATheFridayClub/businessSelect/product/productSizeSelect'
  import { productTypesEnum } from '@/enums/product'

  export default {
    name: 'ProductBaseInfoForm',
    components: {
      ProductSizeSelect,
      ShopTypeSelect,
      ProductPrintType,
      ProductCategoricalSelect,
      ShowMore,
      ProductSelect,
      Sticky
    },
    mixins: [layoutMixin, productMixin, form],
    props: {
      modifyData: { //  大写的接受
        type: Object,
        default: () => ({})
      },
      isUpdate: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        isEditStatus: false,  //  是否正在编辑
        backupData: {}, //

        editForm: {},  //  编辑的是这个备份
        rules: {
          productName: [
            { required: true, message: '产品名不能为空', trigger: ['change', 'blur'] }
          ],

          categoricalId: [
            { required: true, message: '产品分类不能为空', trigger: ['change', 'blur'] }
          ],
          // cutFilePath:[
          //   {required:true, validator: validateCutFilePath, trigger:['change','blur'] },
          // ],
          productPrintTypeId: [
            { required: true, message: '打印类型不能为空', trigger: ['change', 'blur'] }
          ],
          productShopType: [
            { required: true, message: '输出类型不能为空', trigger: ['change', 'blur'] }
          ],
          productSize: [
            { required: true, message: '产品显示尺寸不能为空', trigger: ['change', 'blur'] }
          ],
          productType: [
            { required: true, message: '产品类型不能为空', trigger: ['change', 'blur'] }
          ],
          singleWeight: [
            { required: true, message: '单P重量不能为空', trigger: ['change', 'blur'] }
          ],
          sizeDetailId: [
            { required: true, message: '尺寸不能为空', trigger: ['change', 'blur'] }
          ],
          weight: [
            { required: true, message: '标准重量不能为空', trigger: ['change', 'blur'] }
          ]
        } |> objFirstKeyUpperCase
      }
    },
    created() {
      //  因为父组件的data是异步加载的,所以不能直接取,可能需要监听一次变化
      const unWatch = this.$watch('modifyData', async() => {
        console.log('clear =====>>>>>')
        this.editForm = deepClone(this.modifyData)
        await this.$nextTick()
        this.clearValidate('modifyDataForm')
        unWatch()
      })
    },
    methods: {
      cancelEdit() {
        this.isEditStatus = false
        this.editForm = deepClone(this.modifyData)
        this.updateRealFormData(this.modifyData)
      },
      updateRealFormData(data) {
        this.$emit('update:modifyData', data)
      },
      startEdit() {
        this.editForm = deepClone(this.modifyData)
        this.isEditStatus = true
        this.clearValidate('modifyDataForm')
        // this.backupData = deepClone(this.modifyData)
      },
      //  保存产品信息
      async saveProductBaseInfo({ status } = {}) {
        const { modifyData: { Code, ProductType }, editForm } = this
        const otherTransfer = (v) => ({ ...v, name: v.productName })
        try {
          await this.validateForm('modifyDataForm')
          const { Code: resCode, Result } = await ModifyProduct(
            editForm |> objFirstKeyLowerCase |> otherTransfer|> Array.of
          )
          if (resCode === ERR_OK) {
            this.updateRealFormData(this.editForm)
            this.isEditStatus = false
            this.$message.success(`保存${this.linkFrom}成功`)
            if (!this.isUpdate) { //  新增时需要来跳转页面,如果时产品,则跳转到配置产品组件页面,否则跳转到修改组件详情信息页面
              const ProductId = Result[Code]
              this.$router.replace({
                name: (() => {
                  //  事件一般都是同步的
                  console.log(this.editForm.ProductType)
                  console.log(productTypesEnum['组件'])
                  console.log(editForm.ProductType)
                  return productTypesEnum['组件'] === editForm.ProductType ? 'componentModify' : 'editProductInfo'
                })(), query: { ProductId, Code }
              })
            }
          } else {
            this.$message.warning(`保存${this.linkFrom}失败`)
          }
        } catch (e) {
          console.log(e)
        }
      }
    }

  }
</script>

<style lang="scss" scoped>

</style>
